<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/home'}">主页</el-breadcrumb-item>
    </el-breadcrumb>

      <!--学生列表部分-->
      <el-table :data="studentList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="学号" prop="Sno"></el-table-column>
        <el-table-column label="姓名" prop="Sname"></el-table-column>
        <el-table-column label="地址" prop="Sregion"></el-table-column>
        <el-table-column label="性别" prop="Ssex"></el-table-column>
        <el-table-column label="年龄" prop="Sage"></el-table-column>
        <el-table-column label="政治面貌" prop="SpoliticsStatus"></el-table-column>
        <el-table-column label="民族" prop="Snation"></el-table-column>
        <el-table-column label="学制" prop="Sdegree"></el-table-column>
        <el-table-column label="奖惩信息" prop="SdisciplinaryRecord"></el-table-column>
        <el-table-column label="休复转退" prop="Smark"></el-table-column>
        <el-table-column label="专业" prop="Sdept"></el-table-column>
      </el-table>
      <!--分页组件 -->
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[1, 2, 5, 20]"
          :page-size="queryInfo.pageNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

  </div>
</template>

<script>
export default {
  data(){
    return{
      //查询信息实体
      queryInfo:{
        //query:"",
        pageNum:1,
        pageSize:5,
      },
      studentList:[],
      total:0,
    }
  },
  created(){
    this.getStudentList();
  },
  methods:{
    //获取所有学生
    async getStudentList(){
      const {data:res} = await this.$http.get("/list",{params:this.queryInfo});
      this.studentList = res.data; //数据封装学生列表数据
      this.total = res.number; //总学生数封装
    },
    //最大数
    handleSizeChange(newSize){
      this.queryInfo.pageSize = newSize;
      this.getStudentList();
    },
    //pageNum触发
    handleCurrentChange(newPage){
      this.queryInfo.pageNum = newPage;
      this.getStudentList();
    }
  }
}
</script>
<style lang="less" scoped>
.el-breadcrumb{
  margin-bottom: 15px;
  font-size: 17px;
}
</style>
